<script setup>
import { ref } from 'vue'
import { useUser } from '@/composition/useUser'
import { useToast } from '@/composition/useToast'
import { generateUUID, go2Link, go2Router, copyJSON, getDeviceType, bgColors, isPhone, uploadFile, isNotEmpty, isEmpty, saveUser2Db } from '@/plugins/util.js'

const { loginModel, user, login, loggedIn, logout, regist, sendRegistVerifyCode, resetUserInfo, sendModifyPwdVerifyCode, modifyUserPwd } = useUser();

const { successToast, errorToast } = useToast();

const curOperType = ref('login');


</script>


<template>
    <div class="h-container">
        <div class="m-5">
            <header class="border-l-8 border-green-500 py-3 pl-4 bg-green-200 rounded italic tracking-widest">
                <span class="text-indigo-500 cursor-pointer" @click="go2Router('home')">主页</span>
                <span class="mx-2">/</span>
                <span>账号管理</span>
            </header>

            <section class="mt-4">
                <div class="grid grid-cols-1 md:grid-cols-3 items-center">
                    <div class="col-span-1" @click="go2Link('https://support.qq.com/products/170200')">
                        <img src="@/assets/img/login.svg" class="cursor-pointer">
                    </div>
                    <form class="col-span-1 md:col-span-2" ref="loginForm" v-show="!loggedIn">
                        <div class="grid grid-cols-1 md:gap-y-5">
                            
                            <template v-if="curOperType == 'login'">
                                <h-input v-model="loginModel.username" label="登陆账号：" placeholder="请输入账号/邮箱"></h-input>
                                <h-input v-model="loginModel.password" label="密码：" placeholder="请输入密码" type="password"></h-input>
                                <div class="flex-row md:flex items-center mt-5 md:mt-0">
                                    <div class="w-36 leading-10"></div>
                                    <button type="button" class="btn btn-primary w-full" @click="login">
                                        登 陆
                                    </button>
                                </div>
                                <div class="flex-row md:flex items-center mt-5 md:mt-0">
                                    <div class="w-36 leading-10"></div>
                                    <div class="w-full flex space-x-8">
                                        <button type="button" class="btn btn-warning w-full" @click="curOperType = 'modifyUserPwd'">
                                            忘记密码？修改
                                        </button>
                                        <button type="button" class="btn btn-blue w-full" @click="curOperType = 'regist'">
                                            没有账号？注册
                                        </button>
                                    </div>
                                </div>
                            </template>

                            <!-- regist form -->
                            <template v-if="curOperType == 'regist'">
                                <h-input v-model="loginModel.username" label="登陆账号：" placeholder="请输入账号/邮箱"></h-input>
                                <h-input v-model="loginModel.password" label="密码：" placeholder="请输入密码" type="password"></h-input>
                                <h-input v-model="loginModel.password2" label="确认密码：" placeholder="请再次输入密码" type="password"></h-input>、
                                <h-input v-model="loginModel.email" label="邮箱：" placeholder="请输入邮箱"></h-input>
                                <h-input v-model="loginModel.verifyCode" label="验证码：" placeholder="请输入邮箱验证码">
                                    <template #right>
                                        <button type="button" class="btn btn-primary w-36" @click="sendRegistVerifyCode">
                                            发 送
                                        </button>
                                    </template>
                                </h-input>
                                <div class="flex-row md:flex items-center mt-5 md:mt-0">
                                    <div class="w-36 leading-10"></div>
                                    <button type="button" class="btn btn-blue w-full" @click="regist">
                                        注 册
                                    </button>
                                </div>
                                <div class="flex-row md:flex items-center mt-5 md:mt-0">
                                    <div class="w-36 leading-10"></div>
                                    <div class="w-full flex space-x-8">
                                        <button type="button" class="btn btn-primary w-full" @click="curOperType = 'login'">
                                            已有账号？登陆
                                        </button>
                                    </div>
                                </div>
                            </template>

                            <!-- modifyUserPwd form -->
                            <template v-if="curOperType == 'modifyUserPwd'">
                                <h-input v-model="loginModel.email" label="邮箱：" placeholder="请输入邮箱"></h-input>
                                <h-input v-model="loginModel.verifyCode" label="验证码：" placeholder="请输入邮箱验证码">
                                    <template #right>
                                        <button type="button" class="btn btn-primary w-36" @click="sendModifyPwdVerifyCode">
                                            发 送
                                        </button>
                                    </template>
                                </h-input>
                                <h-input v-model="loginModel.password" label="新密码：" placeholder="请输入密码" type="password"></h-input>
                                <h-input v-model="loginModel.password2" label="确认新密码：" placeholder="请再次输入密码" type="password"></h-input>
                                <div class="flex-row md:flex items-center mt-5 md:mt-0">
                                    <div class="w-36 leading-10"></div>
                                    <button type="button" class="btn btn-warning w-full" @click="modifyUserPwd">
                                        修改密码
                                    </button>
                                </div>
                                <div class="flex-row md:flex items-center mt-5 md:mt-0">
                                    <div class="w-36 leading-10"></div>
                                    <div class="w-full flex space-x-8">
                                        <button type="button" class="btn btn-primary w-full" @click="curOperType = 'login'">
                                            已有账号？登陆
                                        </button>
                                    </div>
                                </div>
                            </template>
                            

                        </div>
                    </form>

                    <div class="col-span-1 md:col-span-2" v-show="loggedIn">
                        <header
                            class="border-l-8 border-green-500 py-3 pl-4 bg-green-200 rounded italic tracking-widest mb-2">
                            <span>{{ user.baseInfo.userName }}</span>
                            <span class="">你好~</span>
                            <p class="mt-2">注册时间 :{{ user.baseInfo.createDate }}</p>
                        </header>

                        <div class="grid grid-cols-1 gap-y-2">
                            <button type="button" class="btn btn-primary" @click="logout">
                                登出
                            </button>
                            <button type="button" class="btn btn-warning" @click="resetUserInfo">
                                重置用户信息
                            </button>
                            <!-- <button type="button" class="btn btn-warning" @click="curOperType == '111'">
                                修改密码
                            </button> -->
                            <!--  <button type="button" class="btn btn-blue" @click="showMdUserInfo">
                                修改用户信息
                            </button>
                            <button type="button" class="btn btn-error" @click="showDeleteUser">
                                注销用户
                            </button> -->
                        </div>
                    </div>


                </div>


            </section>
        </div>
    </div>
</template>


<style scoped></style>
